<template>
  <div class="app-container" v-loading="loading">
    <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">

      <el-form-item label="扫码器" prop="bcr">
        <el-input
          v-model="queryParams.bcr"
          placeholder="请输入扫码器"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>

<!--      <el-form-item label="plc编号" prop="plcNo">-->
<!--        <el-input-->
<!--          v-model="queryParams.plcNo"-->
<!--          placeholder="请输入plc编号"-->
<!--          clearable-->
<!--          size="small"-->
<!--          @keyup.enter.native="handleQuery"-->
<!--        />-->
<!--      </el-form-item>-->


      <el-form-item label="查询时间">
        <el-date-picker
          v-model="dateRange"
          size="small"
          style="width: 350px"
          value-format="yyyy-MM-dd HH:mm:ss"
          type="datetimerange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期">
        </el-date-picker>
      </el-form-item>



      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
        <el-button  size="mini" @click="detailIsOpen">数据列表</el-button>
      </el-form-item>
    </el-form>






    <div id="main" style="width: 1300px;height:800px; margin:auto;"></div>
    <!-- 详情界面 -->
    <el-dialog  :title="detailTitle" :visible.sync="detailOpen" width="1000px" append-to-body>
      <el-row :gutter="10" class="mb8">

        <el-col :span="1.5">
          <el-button
            type="warning"
            plain
            icon="el-icon-download"
            size="mini"
            :loading="exportLoading"
            @click="handleExport"
            v-hasPermi="['wcs:sortPortTotal:export']"
          >导出</el-button>
        </el-col>
<!--        <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>-->
      </el-row>

      <el-table  :data="sortPortTotalList" @selection-change="handleSelectionChange">
        <!--      <el-table-column type="selection" width="55" align="center" />-->
        <!--      <el-table-column label="id" align="center" prop="id" />-->
        <!--      <el-table-column label="设备编号" align="center" prop="plcNo" />-->
        <el-table-column label="扫码器" align="center" prop="bcr" />
        <!--      <el-table-column label="承运商编号" align="center" prop="carrierCode" />-->
        <el-table-column label="分拣口编号" align="center" prop="sortPortNo" />
        <el-table-column label="总数" align="center" prop="total" />

      </el-table>

      <pagination
        v-show="total>0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
      />

    </el-dialog>
  </div>
</template>

<script>
import { listSortPortTotal, getSortPortTotal, delSortPortTotal, addSortPortTotal, updateSortPortTotal, exportSortPortTotal } from "@/api/wcs/sortPortTotal";
import {initRangeDate} from "@/api/wcs/general/wcs_tool.js";
import * as echarts from 'echarts';
export default {
  name: "SortPortTotal",
  components: {
  },
  data() {
    return {
      // 遮罩层
      loading: true,
      // 导出遮罩层
      exportLoading: false,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 分拣口统计表格数据
      sortPortTotalList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 承运商编号字典
      carrierCodeOptions: [],
      // 日期范围
      dateRange: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 50,
        plcNo: null,
        bcr: null,
        carrierCode: null,
        sortPortNo: null,
        total: null,
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {
      },
      detailOpen:false,
      detailTitle:"",
    };
  },
  created() {
    this.dateRange = initRangeDate();
    this.getList();
    // this.getDicts("wcs_carrier_type").then(response => {
    //   this.carrierCodeOptions = response.data;
    // });
  },
  methods: {
    /** 查询分拣口统计列表 */
    getList() {
      this.loading = true;
      // console.log(Date.parse(new Date()))
      let startLogTime = Date.parse(new Date());
      listSortPortTotal(this.addDateRange(this.queryParams, this.dateRange)).then(response => {
        // console.log(Date.parse(new Date()))
        this.sortPortTotalList = response.rows;
        this.total = response.total;
        this.loading = false;
        //获取图表数据
        let legendDataArr = []
        let jsonDataArr = [];
        this.sortPortTotalList.forEach(data =>{
          let bcrAndPortName = '扫码器-'+data.bcr+'->格口-'+data.sortPortNo;
          legendDataArr.push(bcrAndPortName);
          let oneJsonData = {name:bcrAndPortName,value:data.total}
          jsonDataArr.push(oneJsonData)

        })
        if(this.sortPortTotalList.length == 0){
          this.$message('无数据');
        }
        // console.log('获取数据耗时：'+(Date.parse(new Date())-startLogTime)/1000+'s!')
        this.initChar(legendDataArr,jsonDataArr);
        console.log('耗时：'+(Date.parse(new Date())-startLogTime)/1000+'s!')
        // console.log(legendDataArr)
        // console.log(jsonDataArr)
        // console.log(Date.parse(new Date()))
      });


    },
    // 承运商编号字典翻译
    carrierCodeFormat(row, column) {
      return this.selectDictLabel(this.carrierCodeOptions, row.carrierCode);
    },
    /** 搜索按钮操作 */
    detailIsOpen() {
      this.detailOpen = true;
      this.detailTitle = "分拣口统计详情";
    },
    /**
     * 初始化echars
     */
    initChar(legendData,jsonData) {
      // 基于准备好的dom，初始化echarts实例
      let myChart = echarts.init(document.getElementById('main'));

      // 指定图表的配置项和数据
      let option = {
        title:{
          text:'格口统计图',
          //标题的样式
          textSytle:{
            //颜色
            color : '#FF0000',
            x:'center',//标题位置
            //粗细
//                 fontWeight : 'bold',
            //大小
//                 fontSize : 29
          },
          //标题顶部距离样式
          // top:5,
        },
        //工具框
        toolbox: {
          //悬停在小图标的文本提示
          showTitle:true,
          //工具种类
          feature: {
            //数据视图
            dataView: {
              show: false,
              //只读设置
              readOnly: true,  lang:['','关闭'],
              //小图标的文本提示，配合showTitle使用
              title:"数据视图",
            },
            //重置
            restore: {show: true},
            //图片下载
            saveAsImage: {show: true},

          }
        },
        //提示框组件
        tooltip : {
          //触发类型：item主要在散点图、饼图中；axis主要在柱状图折线图中。
          trigger: 'item',
          //提示框浮层内容格式器，两种模式：字符串模板、回调函数模板。
          formatter: "{a} <br/>{b} <br/>数量：{c}  <br/>百分比：({d}%)"
        },
        //图例
        legend: {

          //图例类型，普通，还有可滚动型
          type: 'plain',
          //布局朝向，竖排，还有横排
          orient: 'vertical',
          //图例相对于容器左侧距离
          left:5,
          //图例相对于容器上侧距离
          top: 40,
          //图例数据列表,格式为数组:["本科", "博士研究生", "硕士研究生", "专科"]
          data: legendData

        },

        series:[
          {
            //数据项名称,可用于提示框显示。
            name:'格口统计',
            //图表类型
            type:'pie',
            //图形大小比例,按半径计算。
            radius:'60%',
            //图表数据,格式为json数组:[{"name":"本科","value":29},{"name":"博士研究生","value":8},{"name":"硕士研究生","value":2},{"name":"专科","value":4}]
            data:jsonData,
            //图形样式
            itemStyle: {
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]

      };

      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        id: null,
        plcNo: null,
        bcr: null,
        carrierCode: null,
        sortPortNo: null,
        total: null,
        startTime: null,
        endTime: null,
        creatime: null,
        modifytime: null
      };
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      // this.resetForm("queryForm");
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.dateRange = initRangeDate();
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.id)
      this.single = selection.length!==1
      this.multiple = !selection.length
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.open = true;
      this.title = "添加分拣口统计";
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset();
      const id = row.id || this.ids
      getSortPortTotal(id).then(response => {
        this.form = response.data;
        this.open = true;
        this.title = "修改分拣口统计";
      });
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.form.id != null) {
            updateSortPortTotal(this.form).then(response => {
              this.msgSuccess("修改成功");
              this.open = false;
              this.getList();
            });
          } else {
            addSortPortTotal(this.form).then(response => {
              this.msgSuccess("新增成功");
              this.open = false;
              this.getList();
            });
          }
        }
      });
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const ids = row.id || this.ids;
      this.$confirm('是否确认删除分拣口统计编号为"' + ids + '"的数据项?', "警告", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(function() {
          return delSortPortTotal(ids);
        }).then(() => {
          this.getList();
          this.msgSuccess("删除成功");
        })
    },
    /** 导出按钮操作 */
    handleExport() {
      const queryParams = this.queryParams;
      this.$confirm('是否确认导出所有分拣口统计数据项?', "警告", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(() => {
          this.exportLoading = true;
          return exportSortPortTotal(queryParams);
        }).then(response => {
          this.download(response.msg);
          this.exportLoading = false;
        })
    }
  }
};
</script>
